<template>
  <div id="home">
    <headers></headers>
    <navs></navs>
    <div class="banner w">
      <div class="left">
        <ul>
          <li v-for="(item,i) in bannerList" :key="i" @mouseenter="show(i)" @mouseleave="hide">
            <span class="title">{{item.title}}</span> <span class="more"> > </span>
            <div class="img" v-show="active == i">
              <img :src="item.img" alt="">
            </div>
          </li>
        </ul>
      </div>
      <swiper></swiper>
    </div>
    <banner-footer></banner-footer>
    <div class="content ">
      <div class="w">
        <miao></miao>
        <one :list="phone.phone" :topImg="phone.topimg" :leftImg="phone.leftimg"></one>
        <one :list="jia.tv" :topImg="jia.topimg" :leftImg="jia.leftimg"></one>
        <one :list="wrap.wrap" :topImg="wrap.topimg" :leftImg="wrap.leftimg"></one>
        <one :list="headset.headset" :topImg="headset.topimg" :leftImg="headset.leftimg"></one>
        <one :list="charger.charger" :topImg="charger.topimg" :leftImg="charger.leftimg"></one>
        <one :list="rim.rim" :topImg="rim.topimg" :leftImg="rim.leftimg"></one>
      </div>
    </div>
    <div class="sidebar">
      <ul>
        <li v-for="(item,i) in sidebar" :key="i">
          <i :class="item.icon"></i>
          <span>{{item.title}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import one from '../components/big/one';
import miao from '../components/miao/miao';
import headers from "../components/headers";
import navs from "../components/navs";
import swiper from "../components/banner/swiper";
import bannerFooter from "../components/banner/footers";
export default {
  name: "home",
  //组件
  components: {
    headers,
    one,
    navs,
    swiper,
    bannerFooter,
    miao,
  },
  //数据
  data() {
    return {
      bannerList  : [
        {
          title : '手机 电话卡',
          img : 'imges/bannerer/1手机.png'
        },{
          title : '电视 盒子',
          img : 'imges/bannerer/2电视.png'
        },{
          title : '笔记本 显示器',
          img : 'imges/bannerer/3笔记本.png'
        },{
          title: '家电 插线板',
          img : 'imges/bannerer/4家电.png'
        },{
          title : "出行 穿戴",
          img : 'imges/bannerer/5出行.png'
        },{
          title : '智能 路由器',
          img : 'imges/bannerer/6智能.png'
        },{
          title : '电源 配件',
          img : 'imges/bannerer/7电源.png'
        },{
          title : '健康 儿童',
          img : 'imges/bannerer/8健康.png'
        },{
          title : '耳机 音箱',
          img : 'imges/bannerer/9耳机.png'
        },{
          title : '生活 箱包',
          img : 'imges/bannerer/10生活.png'
        }
      ],
      active : -1,
      phone : '',
      jia : '',
      wrap : '',
      headset : '',
      charger : '',
      rim : '',
      sidebar : [
        {
          title : '手机APP',
          icon : 'el-icon-s-platform'
        },{
          title : '个人中心',
          icon : 'el-icon-user-solid'
        },{
          title : '售后服务',
          icon : 'el-icon-s-tools'
        },{
          title : '人工客服',
          icon : 'el-icon-headset'
        },{
          title : '购物车',
          icon : 'el-icon-shopping-cart-full'
        }
      ]
    };
  },
  //挂载后
  mounted() {
    this.$http.get('hotgoods.json').then(res=>{
      console.log(res.data.data);
      this.phone = res.data.data[0]
      this.jia = res.data.data[1]
      this.wrap = res.data.data[2]
      this.headset = res.data.data[3]
      this.charger = res.data.data[4]
      this.rim = res.data.data[5]
    })
  },
  //方法
  methods: {
    show(i){
      this.active = i
    },
    hide(){
      this.active = -1
    }
  },
  //过滤，筛选
  filters: {},
  //计算
  computed: {},
  //监听
  watch: {
    //被监听者名称
    $route: {
      //是否一进入页面就开始监听
      immediate: false,
      //执行函数
      handler(newVal, oldVal) {},
      //是否深度监听
      deep: false,
    },
  },
};
</script>

<style lang='scss' >
.w {
  width: 1200px;
  margin: 0px auto;
}
.banner {
  position: relative;
  margin-bottom: 10px;
  .left {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 234px;
    height: 460px;
    background-color: rgba(0, 0, 0, 0.253);
    z-index: 200;
    ul{
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 25px 0;
    }
    .title{
      float: left;
    }
    .more{
      float: right;
    }
    li{
      padding: 10px 10px;
      .img{
        position: absolute;
        top: 0;
        left: 234px;
        height: 460px;
        img{
          height: 460px;
        }
      }
    }
    li:hover{
      background-color: #FF6700;
    }

  }
}
.content{
  width: 100%;
  background-color: #F5F5F5;
  padding: 100px;
  overflow: hidden;
  h2{
    text-align: left;
    font-weight: 300;
    margin: 15px 0;
  }
}
.sidebar{
  position: fixed;
  top: 25%;
  right: -40px;
  transform: translate(-50%);
  width: 84px;
  ul{
    li{
      height: 92px;
      text-align: center;
      border: 1px solid #eee;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: rgb(151, 151, 151);
      i{
        font-size: 40px;
      }
    }
  }
}
</style>
